<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>丰业家居管理后台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link href="resources/admin/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="resources/admin/assets/css/font-awesome.min.css" />
    <!--[if IE 7]>
    <link rel="stylesheet" href="resources/admin/assets/css/font-awesome-ie7.min.css" />
    <![endif]-->

    <link rel="stylesheet" href="resources/admin/assets/css/ace.min.css" />
    <link rel="stylesheet" href="resources/admin/assets/css/ace-rtl.min.css" />

    <!--[if lt IE 9]>
    <script src="resources/admin/assets/js/html5shiv.js"></script>
    <script src="resources/admin/assets/js/respond.min.js"></script>
    <![endif]-->

    <script type="text/javascript" src="resources/admin/assets/js/jquery.min.js"> </script>
    <script type="text/javascript" src="resources/admin/assets/js/jquery.form.js"> </script>
    <script type="text/javascript" src="resources/admin/assets/js/jquery.validate.min.js"></script>
    <script src="resources/admin/artDialog/artDialog.js?skin=simple"></script>
    <script type="text/javascript">
        $(function(){
            $('#loginForm').validate({
                errorElement: 'div',
                errorClass: 'help-block',
                focusInvalid: false,
                rules: {
                    username:{
                        required: true
                    },
                    password:{
                        required:true
                    }
                },
                highlight: function (e) {
                    $(e).closest('.block').removeClass('has-info').addClass('has-error');
                },
                success: function (e) {
                    $(e).closest('.block').removeClass('has-error');//.addClass('has-info');
                    $(e).remove();
                },submitHandler: function(form) {
                    form.submit();
                },
                errorPlacement: function(error, element) {
                    if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });

            $("#kaptchaImage").click(function(){
                $(this).hide().attr('src', '${pageContext.request.contextPath}/auther/images/captchaImg.do?' + Math.floor(Math.random()*100) ).fadeIn();
            })
        });
        function doCancel(){
            $("#loginForm input[name=email]").val("");
            $("#loginForm input[name=password]").val("");
            $(".error-text").html("<strong>注意!</strong> 用户名密码为必填选项.");
        }
    </script>
</head>
<body class="login-layout">
<div class="main-container">
    <div class="main-content">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="login-container">
                    <div class="space-12" style="margin-top: 50px; "></div>
                    <div class="center">
                        <%
                            String message = (String)request.getAttribute(FormAuthenticationFilter.DEFAULT_ERROR_KEY_ATTRIBUTE_NAME);
                            request.setAttribute("error", message);
                        %>
                        <h1>
                            <i class="icon-leaf green"></i>
                            <span class="red">丰业家居</span>
                            <span class="white">管理平台</span>
                        </h1>
                    </div>
                    <div class="space-6"></div>
                    <div class="position-relative">
                        <div id="login-box" class="login-box visible widget-box no-border">
                            <div class="widget-body">
                                <div class="widget-main">
                                    <h4 class="header blue lighter bigger">
                                        <i class="icon-coffee green"></i>
                                        输入你的登录信息:
                                    </h4>
                                    <div class="space-6"></div>
                                    <c:choose>
                                        <c:when test="${error eq 'org.apache.shiro.authc.IncorrectCredentialsException'}">
                                            <div class="alert alert-danger error-text">
                                                <strong>账号或密码错误!</strong>
                                            </div>
                                        </c:when>
                                        <c:when test="${error eq 'com.jianzh5.shiro.CaptchaException'}">
                                            <div class="alert alert-danger error-text">
                                                <strong>验证码错误!</strong>
                                            </div>
                                        </c:when>
                                        <c:when test="${error eq 'org.apache.shiro.authc.UnknownAccountException'}">
                                            <div class="alert alert-danger error-text">
                                                <strong>用户名不存在,请重试!</strong>
                                            </div>
                                        </c:when>
                                    </c:choose>
                                    <form action="${pageContext.request.contextPath}/admin" id="loginForm" method="post">
                                        <fieldset>
                                            <label class="block clearfix">
													<span class="block input-icon input-icon-left">
														<i class="ace-icon fa fa-user"></i>
														<input type="text" class="form-control" placeholder="账号" name="username"/>
													</span>
                                            </label>

                                            <label class="block clearfix">
													<span class="block input-icon input-icon-left">
														<input type="password" class="form-control" placeholder="密码" name="password"/>
														<i class="ace-icon fa fa-lock"></i>
													</span>
                                            </label>
                                            <c:if test="${isValidateCodeLogin}">
                                                <label class="block clearfix">
														<span class="block input-icon input-icon-left">
														<input type="text" class="col-sm-4" placeholder="验证码" name="validateCode" maxlength="4" id="kaptcha"/>
														<i class="ace-icon fa fa-info-circle"></i>
														<img src="${pageContext.request.contextPath}/auther/images/captchaImg.do" width="100" height="35" id="kaptchaImage" style="margin-left: 10px;"/>
														</span>
                                                </label>
                                            </c:if>
                                            <label>
                                                <input type="checkbox" class="ace"  name="rememberMe" value="1" checked="checked"/>
                                                <span class="lbl"> 记住登录信息</span>
                                            </label>

                                            <div class="clearfix">
                                                <button type="submit" class="width-35 pull-left btn btn-sm btn-primary" >
                                                    <i class="icon-key"></i>
                                                    登录
                                                </button>
                                                <button type="button" class="width-35 pull-right btn btn-sm btn-pink" onclick="doCancel();">
                                                    <i class="icon-remove"></i>
                                                    取消
                                                </button>
                                            </div>
                                            <div class="space-8"></div>
                                        </fieldset>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>